<template>
  <div>
    <myhead></myhead>
    <div class="flbox">
      <div class="leftnav">
        <div class="use lefttype">
          <div class="icon"><span class="ico ico-effect"></span> 用途</div>
          <ul class="list">
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
          </ul>
        </div>
        <div class="use lefttype">
          <div class="icon"><span class="ico ico-effect"></span> 花材</div>
          <ul class="list">
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
          </ul>
        </div>

        <div class="use lefttype">
          <div class="icon"><span class="ico ico-effect"></span> 颜色</div>
          <ul class="list">
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
          </ul>
        </div>
        <div class="use lefttype">
          <div class="icon"><span class="ico ico-effect"></span>类别</div>
          <ul class="list">
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
          </ul>
        </div>
        <div class="use lefttype">
          <div class="icon"><span class="ico ico-effect"></span> 价格</div>
          <ul class="list">
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
          </ul>
        </div>
        <div class="use lefttype">
          <div class="icon"><span class="ico ico-effect"></span> 枝数</div>
          <ul class="list">
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
            <li>
              <a href="#">爱情鲜花</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- lunbo -->
      <div class="rightpage">
        <div class="block">
          <el-carousel height="342px">
            <el-carousel-item>
              <h3 class="small">
                <img
                  src="../../assets/images/flowerimg/xianhua_bg1.jpg"
                  alt=""
                />
              </h3>
            </el-carousel-item>
            <el-carousel-item>
              <h3 class="small">0</h3>
            </el-carousel-item>
            <el-carousel-item>
              <h3 class="small">0</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="allnav">ooo</div>
        <div class="madelist">
          <div class="made" v-for="(item, index) in arr" :key="index">
            <div>
              <img
              v-lazy="require('../../assets/images/yongflowerimg/' + item.img)"
                alt=""
              />
            </div>
            <!-- <img src="../../assets/images/yongflowerimg/1073315.jpg_220x240.jpg" alt=""> -->
            <p>￥286</p>
            <p>{{item.content}}</p>
            <p>{{item.title}}</p>
            <div class="btn">
              <div>收藏</div>
              <div>加入购物车</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <myfoot></myfoot>
  </div>
</template>

<script>
// import "../../assets/images/yongflowerimg/100"
import myhead from "../../components/Header/header.vue";
import myfoot from "../../components/Footer/footer";
export default {
  components: {
    myhead,
    myfoot,
  },
  data() {
    return {
      arr: "",
    };
  },
  mounted() {
    this.$axios.get("../../../static/data/yongflower.json").then((res) => {
      this.arr = res.data.data;
      console.log(this.arr);
    });
  },
};
</script>

<style lang="less">
.flbox {
  width: 1200px;
  margin: 20px auto;
  display: flex;
}
.leftnav {
  border: 1px solid gray;
}
.use {
  display: flex;
}
li {
  list-style: none;
}
.list {
  width: 180px;
  margin-left: 15px;
}
.list > li {
  float: left;
  margin: 0px 10px;
}
.lefttype {
  border-bottom: 1px solid gray;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.rightpage {
  width: 1000px;
  padding: 0 0 50px 50px;
}
.madelist{
  display: flex;
  flex-wrap: wrap;
}
.made {
  width: 25%;
  img {
    width: 220px;
  }
}
.btn{
  display: flex;
}
</style>